<template>
    <div>
        <h1>中国足球职业联赛队伍队徽</h1>
        <div v-for="team in teams" :key="team.id">
            <img :src="team.crestUrl" :alt="team.name" width="50" height="50">
            <p>{{ team.name }}</p>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getTeamsByCompetition } from './footballApi.js';

// 中国足球职业联赛的 ID，你需要根据实际情况替换
const COMPETITION_ID = 'http://api.football-data.org/v4/teams/2061';

const teams = ref([]);

const fetchTeams = async () => {
    const fetchedTeams = await getTeamsByCompetition(COMPETITION_ID);
    teams.value = fetchedTeams;
};

onMounted(() => {
    fetchTeams();
});
</script>